{% extends 'base.html' %}
{% block title %}
    <title>资源搜索</title>
{% endblock %}
{% block customcss %}
    <link rel="stylesheet" href="/static/ztree/css/bootstrapStyle/bootstrapStyle.css">
    <style>
    .search-input{width: 80%;float: left; height: 50px;}
    .search-btn{width: 20%;float: right;height: 50px}
{#    .layui-card-header-this{border-bottom: 4px solid #5FB878;background-color: #ffffff;}#}
    .sousuo{background-color: #fff;width: 870px;margin-left: 270px}
    .mulu{padding: 0 10px;width: 250px;float:left;height: 600px;overflow:auto}
    .ding{position: fixed;top:0;}
    .no_result{    color: #e2e2e2;text-align: center;}
    .list{height: 150px;border: 1px solid #e6e6e6;padding:5px 15px;margin-bottom: 10px}
    .list:hover{background: rgb(245 245 245)}
    .btn {margin-top: 10px;}
    .title{font-size: 24px;margin-bottom: 10px;height: 31px}
    .biaoti_1{height: 31px}
    .biaoti_2 a:hover {color: #3a95ed}
{#    .title a:hover {color: #3a95ed}#}
    .biaoti{color: #8D8D8D;}
    .biaoti_li{margin-bottom: 5px}
    .shouquan{color: #FFB800;font-size: 18px;}
    .collect i{font-size: 20px;}
    .shoucang:hover{color:#3a95ed }
    </style>
{% endblock %}
{% block content %}
  <div class="layui-row layui-col-space30" style="margin-bottom:20px; ">
{#        #}
        <div class="layui-col-md3"style="font-size: 35px;font-family:'微软雅黑';font-weight: 900;color: rgb(0, 150, 136)" >
            &nbsp;&nbsp;FTP资源检索
        </div>
        <div class="layui-col-md8">
            <input type="text" name="title" autocomplete="off" placeholder="请输入关键字" class="layui-input search-input" style="border-color:rgb(0, 150, 136)"  >
            <button class="layui-btn search-btn" style=""><i class="layui-icon layui-icon-search"></i>搜一下</button>
        </div>
        <div class="layui-col-md1"></div>
  </div>


  <div class="layui-row layui-col-space10 search-result" style="">
    <div class="layui-col-md mulu"  >
        <div class="layui-card" style="overflow: auto">

            <ul class="ul" style="height: 42px;background-color: rgb(0, 150, 136)">
                <li>
                    <div class="layui-card-header layui-card-header-this" onclick="tabsSwitch('tree-dir-id');" id="tabs-header-dir" style="font-size: 16px;text-align: center;color: white;">FTP目录导航</div>
                </li>
            </ul>
          <div class="layui-card-ztree" style="margin-top: 10px;" id="tree-dir-id">
            <ul id="treeDemo" class="ztree"></ul>
          </div>
        </div>
    </div>
    <div class="layui-col-md sousuo" >
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief" style="margin: 0">
          <ul class="layui-tab-title">
            <li class="layui-this">资源查询<span id="resultcount">（共有{% if data %}{{ data|length }}

            {% else %}0{% endif %}数据）</span></li>
          </ul>
          <div class="layui-tab-content" >
            <div class="layui-tab-item layui-show">
                <ul class="resource_list">
                    <li class="no_result" ><h1>没有符合要求的数据！！！</h1></li>
                </ul>
            </div>
            <div >
                 <div id="paged"></div>
            </div>
          </div>
        </div>
    </div>

  </div>
{#    <div id="shoucang" class="" style="font-size: 20px;margin: 30px auto;text-align: center;display: none">#}
{#        <p><i class="layui-icon layui-icon-ok" style="font-size: 20px;color: #2ecc54"></i>&nbsp;&nbsp;&nbsp;&nbsp;收藏成功!</p><br>#}
{#        <p>你可以在<a href="#"style="color:#3a95ed ">资源收藏夹</a>里查看</p>#}
{#    </div>#}
{% endblock %}

{% block customjs %}
    <script type="text/javascript" src="/static/ztree/js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="/static/ztree/js/jquery.ztree.exedit.js"></script>
    <script>

    layui.use(['layer','laydate','util'],function () {
        layer = layui.layer;
        var laydate = layui.laydate,
            util = layui.util;
        util.fixbar({
            barl:true,
            bar2:'&#xe611',
            css:{right:30,bottom:100},
            bgcolor:'rgb(0, 150, 136)',
            click:function (type) {
                if(type === 'bar2'){
{#                    alert('a')#}
                    self.location.href="/user/message/2/"

                }
            }
        })

    });
    //异步加载所有数据
    var kw ='';
    var id = '';
    var limit = 10;
    search_ftpresouce(kw,id,1,limit);

    //点击搜索获取数据
    $(".search-btn").on("click",function () {
        var kw=$('.search-input').val();
        if(!kw){
            alert('请输入要搜索的内容！！！');
            $(".resource_list").empty();
            $("#resultcount").text('(共找到0条结果)');
            $(".resource_list").append(
                '<li class="no_result" ><h1>没有符合要求的数据！！！</h1></li>'
            );
            //没有数据不显示分页信息
            $("#paged").css("display","none")
        }else {
            //调用异步获取函数，获取数据
            search_ftpresouce(kw,id,1,limit);

            //有数据显示分页信息
            $("#paged").css("display","block")
        }
    });
    // 异步获取数据函数
    function search_ftpresouce(kw,id,current_page,limit) {
        $.ajax({
            url:'/resource/search_ftpresouce/?kw='+kw+'&id='+id+'&limit='+limit+'&page='+current_page,
            type:'get',
            success:function (resp) {
                if(resp.code===0){
                    $(".resource_list").empty();
                    if(resp.data.length>0){
                        if (!kw&&!id){
                            $("#resultcount").text('(共有'+resp.count+'条结果)');
                        }else {

                            $("#resultcount").text('(共找到'+resp.count+'条结果)');
                        }
                        $.each(resp.data,function (i, item) {

                            $(".resource_list").append(' <li class="list">\n' +
                            '                            <div class="layui-col-md12 resource_abstract">\n' +
                            '                                <div class="title"><span class="biaoti_1"><i class="layui-icon layui-icon-spread-left" style="color: #fcd000;"></i>&nbsp;</span><span class="biaoti_2">'+item.fname+'</span></div>\n' +
                            '                                <div class="layui-row layui-col-space10" style="margin-left: 20px">\n' +
                            '                                   <div class="layui-col-md8">\n' +
                            '                                       <ul>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">资源摘要：</span><span>'+item.desc+'</span></li>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">资源唯一标识：</span><span>'+item.fid+'</span></li>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">上传部门：</span><span>'+item.resouce_cate+'&nbsp;&nbsp;'+item.uid+'</span></li>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">上传日期：</span><span>'+item.addtimes+'</span></li>\n'+
{#                            '                                           <li class="biaoti_li"><span class="biaoti">是否公开：</span><b><span class="shouquan">'+item.resource_status+'</span></b></li>\n'+#}
                            '                                           \n' +
                            '                                       </ul>\n' +
                            '                                  </div>\n' +
                            '                                    <div class="layui-col-md4 btn" style="word-break: break-all;word-wrap: break-word;">\n' +
{#                            '                                       <div class="collect" style="float:left;line-height:38px;display: none">\n' +#}
{#                            '                                           <a class="shoucang" id="'+item.resource_id+'" style="display: none"><i class="layui-icon layui-icon-star" style="height: 30px;width: 30px"></i>&nbsp;收藏</a>\n'+#}
{#                            '                                           <a class="yishoucang" id="'+item.resource_id+'" style="display: none;color: gold;"><i class="layui-icon layui-icon-star-fill" ></i>&nbsp;已收藏</a>\n'+#}
{#                            '                                       </div>\n' +#}
                            '                                       <div><a href="/resource/api/'+item.id+'/ftprs/download/" target="_blank">'+item.filename+'</a></div>\n'+
                            '                                      <a href="/resource/api/'+item.id+'/ftprs/download/" target="_blank" style="float:reght;"><button class="layui-btn" style="height:24px;line-height: 24px">资源下载</button></a>\n' +
                            '                                   </div>\n' +
                            '                               </div>\n' +
                            '                            </div>\n' +
                            '                        </li>');
                            //根据用户信息判断资源信息是否收藏
                            // TODO 待后台数据传输
{#                            if (0){#}
{#                                $(".yishoucang").css("display","block")#}
{#                            }else {#}
{#                                $(".shoucang").css("display","block")#}
{#                            }#}

                        });
                        $(".no_result").css("display","none");
                    }
                    $("#paged").css("display","block");
                    //开启分页代码
                    layui.use('laypage',function () {
                        var laypage = layui.laypage;
                        layer = layui.layer;
                        laypage.render({
                            elem:'paged',
                            count:resp.count,
                            layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
{#                            skip:true,#}
{#                            limit:10,#}
                            jump:function(obj,first){
                                current_page = obj.curr;
                                limit = obj.limit;
                                if(!first){
                                    $('.resource_list ul li').remove();
                                    search_ftpresouce1(kw,id,current_page,limit);
                                }
                            }
                        })
                    });
                }else if (resp.code===1){
                    $(".resource_list").empty();
                    $("#resultcount").text('(共找到0条结果)');
                    $(".resource_list").append(
                        '<li class="no_result" ><h1>没有符合要求的数据！！！</h1></li>'
                    );
                     //没有数据不显示分页信息
                    $("#paged").css("display","none")
                }
            }

        })
    }
    function search_ftpresouce1(kw,id,current_page,limit) {
        $.ajax({
            url:'/resource/search_ftpresouce/?kw='+kw+'&id='+id+'&limit='+limit+'&page='+current_page,
            type:'get',
            success:function (resp) {
                if(resp.code===0){
                    $(".resource_list").empty();
                    if(resp.data.length>0){
                        if (!kw&&!id){
                            $("#resultcount").text('(共有'+resp.count+'条结果)');
                        }else {

                            $("#resultcount").text('(共找到'+resp.count+'条结果)');
                        }
                        $.each(resp.data,function (i, item) {

                            $(".resource_list").append(' <li class="list">\n' +
                            '                            <div class="layui-col-md12 resource_abstract">\n' +
                            '                                <div class="title"><span class="biaoti_1"><i class="layui-icon layui-icon-spread-left" style="color: #fcd000;"></i>&nbsp;</span><span class="biaoti_2">'+item.fname+'</span></div>\n' +
                            '                                <div class="layui-row layui-col-space10" style="margin-left: 20px">\n' +
                            '                                   <div class="layui-col-md8">\n' +
                            '                                       <ul>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">资源摘要：</span><span>'+item.desc+'</span></li>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">资源唯一标识：</span><span>'+item.fid+'</span></li>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">上传部门：</span><span>'+item.resouce_cate+'&nbsp;&nbsp;'+item.uid+'</span></li>\n' +
                            '                                           <li class="biaoti_li"><span class="biaoti">上传日期：</span><span>'+item.addtimes+'</span></li>\n'+
{#                            '                                           <li class="biaoti_li"><span class="biaoti">是否公开：</span><b><span class="shouquan">'+item.resource_status+'</span></b></li>\n'+#}
                            '                                           \n' +
                            '                                       </ul>\n' +
                            '                                  </div>\n' +
                            '                                    <div class="layui-col-md4 btn" style="word-break: break-all;word-wrap: break-word;">\n' +
{#                            '                                       <div class="collect" style="float:left;line-height:38px;display: none">\n' +#}
{#                            '                                           <a class="shoucang" id="'+item.resource_id+'" style="display: none"><i class="layui-icon layui-icon-star" style="height: 30px;width: 30px"></i>&nbsp;收藏</a>\n'+#}
{#                            '                                           <a class="yishoucang" id="'+item.resource_id+'" style="display: none;color: gold;"><i class="layui-icon layui-icon-star-fill" ></i>&nbsp;已收藏</a>\n'+#}
{#                            '                                       </div>\n' +#}
                            '                                      <div><a href="/resource/api/'+item.id+'/ftprs/download/" target="_blank">'+item.filename+'</a></div>\n'+
                            '                                      <a href="/resource/api/'+item.id+'/ftprs/download/" target="_blank" style="float:reght;"><button class="layui-btn" style="height:24px;line-height: 24px">资源下载</button></a>\n' +
                            '                                   </div>\n' +
                            '                               </div>\n' +
                            '                            </div>\n' +
                            '                        </li>');
                            //根据用户信息判断资源信息是否收藏
                            // TODO 待后台数据传输
{#                            if (0){#}
{#                                $(".yishoucang").css("display","block")#}
{#                            }else {#}
{#                                $(".shoucang").css("display","block")#}
{#                            }#}

                        });
                        $(".no_result").css("display","none")
                    }
                }else if (resp.code===1){
                    $(".resource_list").empty();
                    $("#resultcount").text('(共找到0条结果)');
                    $(".resource_list").append(
                        '<li class="no_result" ><h1>没有符合要求的数据！！！</h1></li>'
                    );
                      //没有数据不显示分页信息
                    $("#paged").css("display","none")

                }
            }

        })
    }
    //目录导航栏切换
{#    function tabsSwitch(args) {#}
{#        if(args==="tree-dir-id"){#}
{#            $("#"+args).css('display','block');#}
{#            $("#tabs-header-dir").addClass("layui-card-header-this");#}
{#            $("#tabs-header-jiegou").removeClass("layui-card-header-this");#}
{#            $("#tree-jigou-id").css("display","none").removeClass("layui-card-header-this");#}
{##}
{#        }else if(args==="tree-jigou-id"){#}
{#            $("#tabs-header-jiegou").addClass("layui-card-header-this");#}
{#            $("#tabs-header-dir").removeClass("layui-card-header-this");#}
{#            $("#"+args).css('display','block');#}
{#            $("#tree-dir-id").css("display","none")#}
{#        }#}
{#    }#}

    //获取目录结构
    var zNodes = [];
    var setting = {
        callback: {
            onClick: zTreeOnClick
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var user_id = "{{ userid }}";
    $.ajax({
        type: "get",
        url: "/mulu/catalog/?user_id=",
        dataType: "json",
        success: function (data){
            $.each(data.data, function (i, item) {
                if (data.code === 0) {
                    zNodes.push({id: item.id, pId: item.parent_id, name: item.name, open: true,isParent:true})
                }else {
                    layer.msg("数据库异常！请联系管理员。")
                }
            });
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        }
    });

    //目录节点点击事件.点击导航栏查询资源
    function zTreeOnClick(event,treeId,treeNode){
        //alert(event);
        //alert(treeNode.id); 当前目录节点id
        //alert(treeId);
        // 清空展示的资源
        $("#source").html(null);
        var id = treeNode.id;
        var kw=$('.search-input').val();
{#        alert(kw);#}
        //调用异步加载函数获取数据。
        search_ftpresouce(kw,id,1,limit);
    }
    //设置导航栏固定
    $(document).ready(function () {
        var $window = $(window),
            $mulu = $('.mulu');
        $window.scroll(function () {
            var window_top = $window.scrollTop();
            if (window_top > 166){
                $mulu.addClass('ding');
            }else {
                $mulu.removeClass('ding');
            }
        });
        //设置鼠标经过事件添加收藏模块
        $('.resource_list').on('mouseenter', '.list', function () {
            $(this).find('.collect').css({'display':'block'});
            $(this).find('.bagbiaoti').css({'color': '#3a95ed'})
        });
        $('.resource_list').on('mouseleave', '.list', function () {
            $(this).find('.collect').css({'display':'none'});
            $(this).find('.bagbiaoti').css({'color': '#000000'})
        });
{#        // 暂不做需求点击收藏事件,后台逻辑。。。。#}
{#        $('.resource_list').on('click','a',function () {#}
{#            if ($(this).prop('class')==='shoucang'){#}
{#                var id = $(this).prop('id');#}
{#                layer.open({#}
{#                    type: 1,#}
{#                    title: false,#}
{#                    closeBtn:0,#}
{#                    area: ['500px', '200px'], //宽高#}
{#                    scrollbar: false,#}
{#                    btn: '我知道了',#}
{#                    btnAlign: 'c',#}
{#                    content:$("#shoucang")#}
{#                });#}
{#            }else {#}
{#                layer.msg('资源已取消收藏',{shade:[0.3,'#000']})#}
{#            }#}
{#        })#}


    });

    </script>
{% endblock %}
